<template>
  <div class="line">
    <div class="main" ref="main">

    </div>
  </div>
</template>
<script>
const echarts = require('echarts/lib/echarts') // 引入echarts
require('echarts/lib/chart/bar') // 引入柱状图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data () {
    return {
      title: {
        text1: '树形图',
        x: 'left',
        y: 'top',
        fontFamily: 'Courier New',
        fontSize: 20,
        color: '#000'
      },

      legend: {
        backgroundColor: '#d2dde6', // 背景颜色
        symbolSize: 7, // 连接点（如小圆圈）大小
        pointColor: '#000', // 连接点（如小圆圈）颜色
        layout: 'orthogonal', // 树图的布局   'radial'
        edgeShape: 'curve', // 直线polyline  曲线curve
        fontSize: 7, // 标签大小
        color: '#0b0507' // 标签颜色
      },
      data: {
        name: 'flare',
        children: [
          {
            name: 'flex',
            children: [
              { name: 'FlareVis', value: 4116 }
            ]
          },
          {
            name: 'scale',
            children: [
              { name: 'IScaleMap', value: 2105 },
              { name: 'LinearScale', value: 1316 },
              { name: 'LogScale', value: 3151 },
              { name: 'OrdinalScale', value: 3770 },
              { name: 'QuantileScale', value: 2435 },
              { name: 'QuantitativeScale', value: 4839 },
              { name: 'RootScale', value: 1756 },
              { name: 'Scale', value: 4268 },
              { name: 'ScaleType', value: 1821 },
              { name: 'TimeScale', value: 5833 }
            ]
          },
          {
            name: 'display',
            children: [
              { name: 'DirtySprite', value: 8833 }
            ]
          }
        ]
      }
    }
  },
  methods: {
    initEcharts () {
      // const THIS = this
      const mainDiv = this.$refs.main // 找到绘制的区域,强烈推荐使用refs
      const myChart = echarts.init(mainDiv) // 初始化
      myChart.setOption({ // 官网例子
        backgroundColor: this.legend.backgroundColor,
        title: {
          text: this.title.text1,
          x: this.title.x, // 标题横向位置//////////////////////////////////// 增
          y: this.title.y, // 标题纵向位置//////////////////////////////////// 增
          textStyle: {
            fontFamily: this.title.fontFamily,
            fontSize: this.title.fontSize,
            color: this.title.color
          }
        },
        series: [
          {
            type: 'tree',
            data: [this.data],
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbolSize: this.legend.symbolSize,
            layout: this.legend.layout, // 树图的布局   'radial'
            symbol: 'emptyCircle',
            edgeShape: this.legend.edgeShape, // 直线polyline  曲线curve
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: this.legend.fontSize, // 标签大小
              color: this.legend.color // 标签颜色
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            itemStyle: {
              borderColor: this.legend.pointColor // 小圆圈颜色
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      })
    }
  },
  mounted () {
    this.initEcharts()
  }
}
</script>

<style lang="scss" scoped>
  .line{
    .main {
      width: 540px;
      height: 300px;
    }
  }
</style>
